<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
            <router-link to="/index">找佩奇</router-link>
            <router-link to="/admin/1">找乔治</router-link>
            <router-link to="/admin/2">找苏西</router-link>
            <router-link to="/admin/3">找波利</router-link>


        </div>
        <!-- 这里是组件模板 -->
        <template id="girl">
            <div>
                <h2>我是佩奇</h2>
            </div>
        </template>
        <template id="boy">
            <div>
                <h2>{{animalname}}</h2>
                <router-view></router-view>
            </div>
        </template>

        <script>
            // 这里是组件
            let Girl = Vue.component('girl',{
                template : '#girl',
            })
                // 嵌套路由的组件
            let Qiao = {
                template : '<div>这里是乔治家</div>'
            }
            let Suxi = {
                template : '<div>这里是苏西家</div>'
            }
            let Boli = {
                template : '<div>这里是波利家</div>'
            } 
            let Boy = Vue.component('boy',{
                template :'#boy',
                data(){
                   return {
                    animalname : '大家好，我是乔治'
                   }
                },
                // 使用water监听路由参数的变化
                watch : {
                    '$route'(to){
                        var id =to.params.id;   
                    // 实现嵌套路由的跳转做法2  有bug
                        if(id ==1){
                            this.animalname = '大家好我是乔治';
                            this.$router.push({name : 'qiao'})
                        }else if(id == 2){
                            this.animalname = '大家好我是苏西';
                            this.$router.push({name : 'suxi'})
                        }else if(id == 3){
                            this.animalname = '大家好我是波利';
                            this.$router.push({name : 'boli'})
                        }
                    },
                },

            })
            // 这里是路由
            let router = new VueRouter({
                routes : [
                    {
                        path : '/index',
                        component : Girl
                    },
                    {
                        path : '/admin/:id',
                        component : Boy,
                        children : [
                            {
                                name : 'qiao',
                                path : 'qiao',
                                component : Qiao
                            },
                            {
                                name : 'suxi',
                                path : 'suxi',
                                component : Suxi
                            },
                            {
                                name : 'boli',
                                path : 'boli',
                                component : Boli
                            },
                        ]
                        
                    }
                ]
            });
            var vm = new Vue({
                el: '#app',
                router,
                data: {

                }
            })
        </script>
    </body>
</html>